<script setup lang="ts">
import empty from '@/assets/icons/svg/empty-box.svg';

defineProps(['mapData']);
</script>

<template>
  <el-row :gutter="10" class="traffic-info">
    <el-col :span="16">
      <el-descriptions :column="1" class="largeScreen-descriptions">
        <el-descriptions-item label="位置">{{ mapData?.info.name || '-' }}</el-descriptions-item>
        <el-descriptions-item label="类型">交通管制</el-descriptions-item>
        <el-descriptions-item label="负责人">{{ mapData?.info.head || '-' }}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{ mapData?.info.phone || '-' }}</el-descriptions-item>
      </el-descriptions>
    </el-col>
    <el-col :span="8">
      <el-carousel v-if="mapData.info?.imgUrls?.length" height="150px" indicator-position="outside">
        <el-carousel-item v-for="(item, index) in mapData.info.imgUrls" :key="index">
          <el-image
            preview-teleported
            style="width: 100%; height: 100%"
            :src="item"
            :preview-src-list="mapData.info.imgUrls"
            :initial-index="index"
            fit="cover"
          />
        </el-carousel-item>
      </el-carousel>
      <el-empty v-else :image="empty" description="暂无图片" class="largeScreen-empty" style="height: 150px" />
    </el-col>
  </el-row>
</template>

<style scoped lang="scss">
.traffic-info {
  width: 100%;

  :deep(.el-empty__image) {
    width: 100px;
  }
}
</style>
